<template>
    <div class="container mx-auto mt-8">
        <h1 class="text-2xl font-semibold mb-4">个人信息修改</h1>
        <form @submit.prevent="updatePersonalInfo">
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-600">Email</label>
                <input v-model="email" type="email" id="email" name="email" class="mt-1 p-2 border w-full" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-600">Password</label>
                <input v-model="password" type="password" id="password" name="password" class="mt-1 p-2 border w-full"
                    required />
            </div>
            <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded">更新信息</button>
        </form>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const email = ref(localStorage.getItem('email'));
const password = ref(localStorage.getItem('password'));

const updatePersonalInfo = () => {
    ElMessage.success('更新成功');
};
</script>

<style scoped>
/* Add your styling here if needed */
</style>
